<template>
  <div class="score-table">
    <h3>{{ title }}</h3>
    <div class="score-main">
      <div class="score-header">
        <!-- <span class="score-title">最高分</span> -->
        <ZgSelect class="score-max-select" :options="scoreOptions" v-model="maxScore" :width="120" />
        <a-button type="link" class="score-add-btn" @click="addRow">添加行</a-button>
      </div>
      <a-table
        :dataSource="rows"
        :pagination="false"
        rowKey="rowKey"
        class="score-list"
        style="width: 100%; margin-top: 8px"
        :customRow="customRow"
        bordered
        size="small"
      >
        <a-table-column title="序号" :width="45" align="center">
          <template slot-scope="text, record, index">
            {{ index + 1 }}
          </template>
        </a-table-column>
        <a-table-column :title="columnTitle" :width="180" align="center">
          <template slot-scope="text, record, index">
            <ZgSelect :mode="selectMode" :options="exceedOptions" v-model="rows[index].exceed" />
            <!-- <ZgInput v-else v-model="rows[index].exceed" :width="120" placeholder="请输入" /> -->
          </template>
        </a-table-column>
        <a-table-column title="得分" :width="180" align="center">
          <template slot-scope="text, record, index">
            <ZgNumber v-model="rows[index].score" :width="120" placeholder="请输入分数" />
          </template>
        </a-table-column>
        <a-table-column title="操作" :width="80" align="center">
          <template slot-scope="text, record, index">
            <a-button type="link" @click="removeRow(index)" :disabled="rows.length === 1">删除</a-button>
          </template>
        </a-table-column>
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, required: true },
    scoreOptions: { type: Array, required: true },
    // 选择模式
    selectMode: { type: String, default: 'default' },
    // 列名
    columnTitle: { type: String, default: '超过' },
    dictionaryOption: { type: Boolean, default: false },
    exceedOptions: { type: Array, default: () => [] },
    initialRows: { type: Array, default: () => [{ exceed: '', score: '' }] }
  },
  data() {
    return {
      maxScore: this.scoreOptions.length ? this.scoreOptions[0].value : '',
      rows: this.initialRows.length
        ? this.initialRows.map((item, i) => ({ ...item, rowKey: i + '_' + Date.now() }))
        : [{ exceed: this.selectMode === 'default' ? '' : [], score: 0, rowKey: '0_' + Date.now() }]
    }
  },
  methods: {
    addRow() {
      this.rows.push({ exceed: '', score: 0, rowKey: this.rows.length + '_' + Date.now() })
    },
    removeRow(index) {
      if (this.rows.length > 1) {
        this.rows.splice(index, 1)
      }
    },
    getRows() {
      // 返回所有行数据和最高分
      return { maxScore: this.maxScore, rows: this.rows.map(({ rowKey, ...rest }) => rest) }
    },
    customRow(record, index) {
      console.log(record, index)
      return { class: 'score-row' }
    }
  }
}
</script>

<style lang="scss" scoped>
.score-table {
  width: 100%;
  display: flex;
  padding-bottom: 10px;
  h3 {
    width: 130px;
    text-align: center;
  }
  .score-main {
    width: calc(100% - 130px);
  }
}
.score-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 8px;
  position: relative;
}
.score-title {
  font-weight: 500;
  color: #333;
  font-size: 15px;
}
.score-max-select {
  // margin-left: 8px;
}
.score-add-btn {
  position: absolute;
  right: 0;
}
.score-list {
  width: 100%;
}
.score-row {
}
</style>
